<template>
<div class="search-page">
  <div class="search-bar">
    <div class="input-bar">
      <i class="fa fa-search isearch" aria-hidden="true"></i>
      <input type="text" class="input" autofocus>
    </div>
    <p @click="close" class="cancel">取消</p>
  </div>
  <div class="search-kind">
    <a class="s-kind s-text">
      <i class="fa fa-file-text-o" aria-hidden="true"></i>
      <p class="s-title">文本</p>
    </a>
    <a class="s-kind s-image">
      <i class="fa fa-picture-o" aria-hidden="true"></i>
      <p class="s-title">图片</p>
    </a>
    <a class="s-kind s-audio">
      <i class="fa fa-microphone" aria-hidden="true"></i>
      <p class="s-title">语音</p>
    </a>
    <a class="s-kind s-web">
      <i class="fa fa-link" aria-hidden="true"></i>
      <p class="s-title">网页</p>
    </a>
    <a class="s-kind s-card">
      <i class="fa fa-list-alt" aria-hidden="true"></i>
      <p class="s-title">卡组</p>
    </a>
  </div>
  <div class="split-line">
    <div class="line"></div>
    <span>所有标签</span>
    <div class="line"></div>
  </div>
  <div class="all-tags">
    <span>#示例卡片</span>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    close () {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
.all-tags{
  display: flex;
  padding: 20px;
}
.split-line{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}
.split-line span{
  margin: 0 5px;
  font-size: 14px;
}
.line{
  height: 1px;
  background-color: #BBBBBB;
  flex: auto;
}
.s-title{
  margin: 5px 0;
}
.s-kind > i{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: lightgray;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 20px;
}
.s-kind{
  flex: auto;
  color: #555555;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search-kind{
  margin-top: 16px;
  padding-top: 5px;
  margin-left: 15px;
  margin-right: 15px;
}
.search-page{
  display: flex;
  flex-direction: column;
  background-color: #E8E8E8;
  height: 100%;
  width: 100%;
}
.input-bar,
.search-bar,
.search-kind{
  display: flex;
}
.search-bar{
  width: 100%;
  height: 64px;
  align-items: center;
  background-color: white;
  padding: 0 10px;
  box-sizing: border-box;
}
.input-bar{
  flex: auto;
  font-size: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: white;
  align-items: center;
  background-color: #E8E8E8;
}
.cancel{
  width: 60px;
}
.isearch{
  width: 40px;
}
.input{
  flex: auto;
  height: 30px;
  outline: none;
  background-color: #E8E8E8;
  border: none;
}
</style>
